<template>
  <!-- 商品销售记录 -->
  <div class="item-sale-record">
    <div class="good_exhibit" v-if="item_info && item_info.link">
      <div class="goods_img">
        <img :src="item_info.pic_url+'480x480'" alt="" v-if="item_info.is_compress==1"/>
        <img :src="item_info.pic_url" alt="" v-else/>
      </div>
      <div class="goods_info">
        <div class="title">{{item_info.title}}</div>
        <div class="bottom">
          <div class="price" v-html="scaleGoodsPriceFn(item_info.price)"></div>
          <van-button round type="info" @click="linkTo(item_info.link)" class="btn buy-gra-btn goods_buy">我也要买</van-button>
        </div>
      </div>
    </div>
    <div class="sectionbox" id="sectionbox" v-if="lists.length>0">
      <van-list v-model="loading"
                  :finished="finished"
                  :error.sync="error"
                  error-text="请求失败，点击重新加载"
                  finished-text=""
                  @load="onLoad">
        <section class="m-navitems" v-for="(record,index) in lists" :key="index">
          <div class="user_pic">
            <img :src="record.head_img"/>
          </div>
          <div class="buyer_info">
            <div class="nickname">{{record.nickname || record.mobile}}</div>
            <div class="sku">{{record.sku_name}}</div>
          </div>
          <div class="num">{{record.num}}{{record.unit}}</div>
          <div class="time">{{record.create_time}}</div>
        </section>
      </van-list>
    </div>
    <div v-else>
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import noData from '@/components/noData/index'
  import { saleRecord } from '@/api/item/item'
  import { scaleGoodsPrice } from '@/utils/index'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    components: {
      noData
    },
    data() {
      return {
        noData: {
          text: '暂无评价',
          img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-data.png',
          width: '214px',
          marginTop: '120px',
          txtMarginTop: '-30px'
        },
        params: {
          item_id: '',
          supplier: '',
          p: 1
        },
        item_info: {},
        lists: [],
        loading: false,
        error: false,
        finished: false
      }
    },
    methods: {
      /**
       * 商品价格 整数放大
       */
      scaleGoodsPriceFn(price, className) {
        return scaleGoodsPrice(price, className)
      },
      init() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)

        saleRecord(this.params).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.item_info = res.data.item_info || {}
            if (res.data.sales_record.length > 0) {
              this.lists = res.data.sales_record
              this.params.p++
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        })
      },
      // 加载更多
      onLoad() {
        if (this.finished) return false
        saleRecord(this.params).then(res => {
          this.loading = false
          if (res.status == 1) {
            if (res.data.sales_record.length > 0) {
              this.lists.push(...res.data.sales_record)
              this.params.p++
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        }).catch(() => {
          this.error = true
        })
      },
      // TODO 小程序跳转
      linkTo(link) {
        openPage(link)
      }
    },
    created() {
      this.params.item_id = this.$route.query.id
      this.params.supplier = this.$route.query.supplier
      this.init()
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
    }
  })
</script>

<style lang="scss">
@import "src/styles/mixin";
@import "src/styles/btn";
.item-sale-record{
  padding:24px;
  .good_exhibit{
    display:flex;
    margin-bottom:20px;
    padding:24px;
    border-radius:20px;
    background:#fff;
    .goods_img{
      overflow:hidden;
      width:186px;
      height:186px;
      margin-right:20px;
      border-radius:10px;
      img{
        display:block;
        width:100%;
      }
    }
    .goods_info{
      flex:1;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        font-weight:bold;
        @include lineClamp(24px);
      }
    }
    .bottom{
      display:flex;
      justify-content: space-between;
      align-items:center;
      .btn{
        font-size:24px;
        height:52px;
        padding:0 28px;
        border:0;
      }
    }
  }
  .sectionbox{
    padding:0 24px;
    border-radius:20px;
    background:#fff;
    .m-navitems{
      display:flex;
      justify-content: space-between;
      align-items:center;
      padding:30px 0;
      .user_pic{
        overflow:hidden;
        width:70px;
        height:70px;
        margin-right:20px;
        border-radius:50%;
        img{
          display:block;
          width:100%;
        }
      }
      .buyer_info{
        flex:1;
        .nickname{
          font-size:26px;
          font-weight:bold;
        }
        .sku{
          margin-top:2px;
          font-size:22px;
          color:#999;
        }
      }
      .num{
        width:100px;
        font-size:24px;
      }
      .time{
        font-size:22px;
        width:240px;
        text-align:right;
        color:#666;
      }
    }
  }
}
</style>
